<template>
  <div class="commonCondition">
    <div class="panel-content">
      <div style="width: 100%;">
        <div class="price">
          <h4>
            <span class="simple_title">
              {{
                curCcwCondition.curModels ? curCcwCondition.curModels.name : (curCthCondition.curModels ? curCthCondition.curModels.name : (curEscfCondition.curModels ?  curEscfCondition.curModels.name : '暂无'))
              }}
            </span>
          </h4>
          <ul>
            <li class="bg_angle pr" style="z-index:200;">
              <i id="s_spdq" @click="showCitySelect()" v-if="selectedProvince && selectedCity">{{selectedProvince.name}}{{selectedCity.name === selectedProvince.name?'':selectedCity.name}}</i>
              <i id="s_spdq" @click="showCitySelect()" v-else>请选择上牌地区</i>
              <div class="provice_p provice clearfix" v-if="citySelectStatus.showProvince">
                <h4>请选择省份</h4>
                <p>
                  <a class="area" v-for="item in curShowCityList" @click="selectProvince(item)">{{item.name}}</a>
                </p>
              </div>
              <div class="provice_c provice clearfix" v-if="citySelectStatus.showCity">
                <h4>请选择城市</h4>
                <p>
                  <a class="area" v-for="item in curShowCityList" @click="selectCity(item)">{{item.name}}</a>
                </p>
              </div>
            </li>
            <li class="h38 bg_angle pr" style="z-index:100;">
              <i id="s_spsj" @click="showCardTime()" v-if="selectedYear && selectedMonth">{{selectedYear}}年{{selectedMonth}}月</i>
              <i id="s_spsj" @click="showCardTime()" v-else>选择上牌时间</i>
              <div class="sp_time clearfix" v-if="cardTimeStatus.showCardYearStatus">
                  <h4>选择上牌时间</h4>
                  <p>
                    <a class="area" v-for="item in cardTimeList.timeList" @click="selectYear(item)">{{item}}年</a>
                  </p>
                </div>
                <div class="sp_time clearfix"v-if="cardTimeStatus.showCardMonthStatus">
                  <h4>选择上牌时间</h4>
                  <p>
                    <a class="area" v-if="selectedYear === curYear" v-for="item in curMonth" @click="selectMonth(item)">{{item}}月</a>
                    <a class="area" v-if="selectedYear !== curYear" v-for="item in 12" @click="selectMonth(item)">{{item}}月</a>
                  </p>
                </div>
            </li>
            <li class="h38 pr" style="z-index:90;">
              <span>万公里</span>
              <input @focus="done(1)" @blur="done(2)" class="lcs" v-model="distance" :placeholder="placeholder" type="text" maxlength="5"
                autocomplete="off">
            </li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showSelectTime: false,
        distance: '',
        placeholder: '行驶里程',
        cardTimeList: '',
        curCcwCondition: '',
        curCthCondition: '',
        curEscfCondition: '',
        curYear: (new Date()).getFullYear(),
        curMonth: (new Date()).getMonth() + 1,
        curShowCityList: [],
        selectedProvince: '',
        selectedCity: '',
        ccwProvinceSelect: '',
        ccwCitySelect: '',
        escfProvinceSelect: '',
        escfCitySelect: '',
        selectedYear: '',
        selectedMonth: '',
        citySelectStatus: {
          showProvince: false,
          showCity: false
        },
        cardTimeStatus: {
          showCardYearStatus: false,
          showCardMonthStatus: false
        },
        ccwCity: {
          parent: [],
          children: []
        },
        cthCity: {
          parent: [],
          children: []
        },
        escfCity: {
          parent: [],
          children: []
        }
      }
    },
    props: {
      ccwCondition: {
        type: Object,
        default: {}
      },
      cthCondition: {
        type: Object,
        default: {}
      },
      escfCondition: {
        type: Object,
        default: {}
      },
      cityList: {
        type: Object,
        default: {}
      },
      commonCondition: {
        type: Object,
        default: {}
      }
    },
    methods: {
      initCity () {
        var ccwCity = this.cityList.ccwCity
        var cthCity = this.cityList.cthCity
        var escfCity = this.cityList.escfCity
        for (var i = 0; i < ccwCity.length; i ++) {
          var item = ccwCity[i]
          if (item.parentId == 0) {
            this.ccwCity.parent.push(item)
          } else {
            this.ccwCity.children.push(item)
          }
        }
        for (var i = 0; i < cthCity.length; i ++) {
          var item = cthCity[i]
          if (item.parentId == 0) {
            this.cthCity.parent.push(item)
          } else {
            this.cthCity.children.push(item)
          }
        }
        for (var i = 0; i < escfCity.length; i ++) {
          var item = escfCity[i]
          if (item.parentId == 0) {
            this.escfCity.parent.push(item)
          } else {
            this.escfCity.children.push(item)
          }
        }
      },
      done(type) {
        // console.log(type)
        if (type == 1) {
          this.placeholder = ''
        } else {
          this.placeholder = '行驶里程'
        }
      },
      showCitySelect () {
        this.getArea(this.cityList.cthCity, 1, 0)
        this.citySelectStatus = {
          showProvince: true,
          showCity: false
        }
      },
      showCardTime () {
        if (!this.cardTimeList) {
          this.$message({
            message: '请先选择车型信息',
            type: 'warning',
            duration: 1000
          });
          return
        }
        this.cardTimeStatus = {
          showCardYearStatus: true,
          showCardMonthStatus: false
        }
      },
      getArea(list, level, parentId) {
        var _self = this
        _self.curShowCityList = []
        for (var i = 0; i < list.length; i ++) {
          var cur = list[i]
          if (cur.parentId == parentId && cur.level == level) {
            _self.curShowCityList.push(cur)
          }
        }
      },
      selectProvince (item) {
        this.selectedProvince = item
        this.getArea(this.cityList.cthCity, item.level + 1, item.id)
        if (this.curShowCityList.length > 0) {
          if (this.curShowCityList.length == 1 && this.curShowCityList[0].name === item.name) {
            this.citySelectStatus = {
              showProvince: false,
              showCity: false
            }
            this.selectedCity = this.curShowCityList[0]
            this.updateConditionCommon()
            this.analysisCity()
          } else {
            this.citySelectStatus = {
              showProvince: false,
              showCity: true
            }
          }
        } else {
          this.citySelectStatus = {
            showProvince: false,
            showCity: false
          }
        }
      },
      selectCity (item) {
        this.selectedCity = item
        this.citySelectStatus = {
          showProvince: false,
          showCity: false
        }
        this.updateConditionCommon()
        this.analysisCity()
      },
      selectYear (item) {
        this.selectedYear = item
        this.cardTimeStatus = {
          showCardYearStatus: false,
          showCardMonthStatus: true
        }
        this.updateConditionCommon()
      },
      selectMonth (item) {
        this.selectedMonth = item
        this.cardTimeStatus = {
          showCardYearStatus: false,
          showCardMonthStatus: false
        }
        this.updateConditionCommon()
      },
      analysisCity () {
        var ccwCity = this.cityList.ccwCity
        var escfCity = this.cityList.escfCity
        for (var i = 0; i < this.ccwCity.parent.length; i ++) {
          var item = this.ccwCity.parent[i]
          if (item.name === this.selectedProvince.name) {
            this.ccwProvinceSelect = item
            break
          }
        }
        for (var i = 0; i < this.ccwCity.children.length; i ++) {
          var item = this.ccwCity.children[i]
          if (item.name === this.selectedCity.name) {
            this.ccwCitySelect = item
            break
          }
        }
        for (var i = 0; i < this.escfCity.parent.length; i ++) {
          var item = this.escfCity.parent[i]
          if (item.name === this.selectedProvince.name) {
            this.escfProvinceSelect = item
            break
          }
        }
        for (var i = 0; i < this.escfCity.children.length; i ++) {
          var item = this.escfCity.children[i]
          if (item.name === this.selectedCity.name) {
            this.escfCitySelect = item
            break
          }
        }
        this.updateConditionCommon ()
      },
      updateConditionCommon () {
        var commonCondition = {
          ccwProvinceSelect: this.ccwProvinceSelect,
          ccwCitySelect: this.ccwCitySelect,
          cthProvinceSelect: this.selectedProvince,
          cthCitySelect: this.selectedCity,
          escfProvinceSelect: this.escfProvinceSelect,
          escfCitySelect: this.escfCitySelect,
          distance: this.distance,
          selectedMonth: this.selectedMonth,
          selectedYear: this.selectedYear
        }
        this.$emit('get-common-condition', commonCondition) 
      },
      setCommonCondition (val) {
        this.selectedProvince = val.cthProvinceSelect
        this.selectedCity = val.cthCitySelect
        this.ccwProvinceSelect = val.ccwProvinceSelect
        this.ccwCitySelect = val.ccwCitySelect
        this.escfProvinceSelect = val.escfProvinceSelect
        this.escfCitySelect = val.escfCitySelect
        this.selectedYear = val.selectedYear
        this.selectedMonth = val.selectedMonth
        this.distance = val.distance
      },
      getCcwCardTime () {
        if (this.curCcwCondition.curModels && (!this.cardTimeList || this.cardTimeList.type === 3)) {
          var end_date = parseInt(this.curCcwCondition.curModels.end_date.substr(0, 4))
          var v_year = parseInt(this.curCcwCondition.curSimleTime)
          var n_year = 0
          if (end_date >= v_year) {
            n_year = ((end_date + 4) > this.curYear) ? this.curYear : end_date + 4
          } else {
            n_year = ((v_year + 4) > this.curYear) ? this.curYear : v_year + 4;
          }
          var timeList = []
          for (var i = v_year; i <= n_year; i ++) {
            timeList.push(i)
          }
          this.cardTimeList = {
            type: 1,
            timeList: timeList
          }
          // console.log(this.cardTimeList)
        }
      },
      getCthCardTime () {
        if (this.curCthCondition.curModels) {
          var max_reg_year = parseInt(this.curCthCondition.curModels.max_reg_year)
          var min_reg_year = parseInt(this.curCthCondition.curModels.min_reg_year)
          var timeList = []
          for (var i = min_reg_year; i <= max_reg_year; i ++) {
            timeList.push(i)
          }
          this.cardTimeList = {
            type: 2,
            timeList: timeList
          }
          // console.log(this.cardTimeList)
        }
      },
      getEscfCardTime () {
        if (this.escfCondition.curModels && !this.cardTimeList) {
          var v_year = parseInt(this.escfCondition.curSimleTime)
          var n_year = ((v_year + 4) > this.curYear) ? this.curYear : v_year + 4;
          var timeList = []
          for (var i = v_year; i <= n_year; i ++) {
            timeList.push(i)
          }
          this.cardTimeList = {
            type: 3,
            timeList: timeList
          }
          // console.log(this.cardTimeList)
        }
      }
    },
    mounted() {
      // console.log(this.cityList.ccwCity.length)
      // console.log(this.cityList.cthCity.length)
      // console.log(this.cityList.escfCity.length)
      this.initCity()
      // console.log(this.ccwCity)
      // console.log(this.cthCity)
      // console.log(this.escfCity)
      this.getCcwCardTime ()
      this.getCthCardTime ()
      this.getEscfCardTime ()
    },
    watch: {
      distance: function (val) {
        this.distance = val
        this.updateConditionCommon ()
      },
      cityList: function (val) {
        // console.log(val)
      },
      commonCondition: function (val) {
        // console.log(val)
        this.setCommonCondition(val)
      },
      ccwCondition: function (val) {
        // console.log(val)
        this.curCcwCondition = val
        this.getCcwCardTime ()
      },
      cthCondition: function (val) {
        // console.log(val)
        this.curCthCondition = val
        this.getCthCardTime()
      },
      escfCondition: function (val) {
        console.log(val)
        this.curEscfCondition = val
        this.getEscfCardTime()
      }
    }
  }
</script>


<style lang="less">
  @import './commonCondition.less';
</style>